* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #66c7f4;
}
.loading {
  width: 450px;
  height: 450px;
  margin: 100px auto;
  position: relative;
  border-radius: 50%;
}
.loading .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-left: calc(-30px / 2);
  margin-top: calc(-30px / 2);
  perspective: 70px;
  transform-style: preserve-3d;
}
.loading .dot::before,
.loading .dot::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.loading .dot::before {
  background: #000;
  top: -100%;
  animation: moveBlack 2000ms infinite;
}
.loading .dot::after {
  background: #fff;
  top: 100%;
  animation: moveWhite 2000ms infinite;
}
@keyframes moveWhite {
  0% {
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate3d(0, -100%, -30px);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translate3d(0, -200%, 0);
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate3d(0, -100%, 30px);
    animation-timing-function: ease-out;
  }
}
@keyframes moveBlack {
  0% {
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate3d(0, 100%, 30px);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translate3d(0, 200%, 0);
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate3d(0, 100%, -30px);
    animation-timing-function: ease-out;
  }
}
.dot:nth-child(1) {
  transform: rotate(calc(360deg / 36 * 1)) translateY(calc(-450px / 2));
}
.dot:nth-child(1)::before,
.dot:nth-child(1)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 1);
}
.dot:nth-child(2) {
  transform: rotate(calc(360deg / 36 * 2)) translateY(calc(-450px / 2));
}
.dot:nth-child(2)::before,
.dot:nth-child(2)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 2);
}
.dot:nth-child(3) {
  transform: rotate(calc(360deg / 36 * 3)) translateY(calc(-450px / 2));
}
.dot:nth-child(3)::before,
.dot:nth-child(3)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 3);
}
.dot:nth-child(4) {
  transform: rotate(calc(360deg / 36 * 4)) translateY(calc(-450px / 2));
}
.dot:nth-child(4)::before,
.dot:nth-child(4)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 4);
}
.dot:nth-child(5) {
  transform: rotate(calc(360deg / 36 * 5)) translateY(calc(-450px / 2));
}
.dot:nth-child(5)::before,
.dot:nth-child(5)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 5);
}
.dot:nth-child(6) {
  transform: rotate(calc(360deg / 36 * 6)) translateY(calc(-450px / 2));
}
.dot:nth-child(6)::before,
.dot:nth-child(6)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 6);
}
.dot:nth-child(7) {
  transform: rotate(calc(360deg / 36 * 7)) translateY(calc(-450px / 2));
}
.dot:nth-child(7)::before,
.dot:nth-child(7)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 7);
}
.dot:nth-child(8) {
  transform: rotate(calc(360deg / 36 * 8)) translateY(calc(-450px / 2));
}
.dot:nth-child(8)::before,
.dot:nth-child(8)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 8);
}
.dot:nth-child(9) {
  transform: rotate(calc(360deg / 36 * 9)) translateY(calc(-450px / 2));
}
.dot:nth-child(9)::before,
.dot:nth-child(9)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 9);
}
.dot:nth-child(10) {
  transform: rotate(calc(360deg / 36 * 10)) translateY(calc(-450px / 2));
}
.dot:nth-child(10)::before,
.dot:nth-child(10)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 10);
}
.dot:nth-child(11) {
  transform: rotate(calc(360deg / 36 * 11)) translateY(calc(-450px / 2));
}
.dot:nth-child(11)::before,
.dot:nth-child(11)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 11);
}
.dot:nth-child(12) {
  transform: rotate(calc(360deg / 36 * 12)) translateY(calc(-450px / 2));
}
.dot:nth-child(12)::before,
.dot:nth-child(12)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 12);
}
.dot:nth-child(13) {
  transform: rotate(calc(360deg / 36 * 13)) translateY(calc(-450px / 2));
}
.dot:nth-child(13)::before,
.dot:nth-child(13)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 13);
}
.dot:nth-child(14) {
  transform: rotate(calc(360deg / 36 * 14)) translateY(calc(-450px / 2));
}
.dot:nth-child(14)::before,
.dot:nth-child(14)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 14);
}
.dot:nth-child(15) {
  transform: rotate(calc(360deg / 36 * 15)) translateY(calc(-450px / 2));
}
.dot:nth-child(15)::before,
.dot:nth-child(15)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 15);
}
.dot:nth-child(16) {
  transform: rotate(calc(360deg / 36 * 16)) translateY(calc(-450px / 2));
}
.dot:nth-child(16)::before,
.dot:nth-child(16)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 16);
}
.dot:nth-child(17) {
  transform: rotate(calc(360deg / 36 * 17)) translateY(calc(-450px / 2));
}
.dot:nth-child(17)::before,
.dot:nth-child(17)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 17);
}
.dot:nth-child(18) {
  transform: rotate(calc(360deg / 36 * 18)) translateY(calc(-450px / 2));
}
.dot:nth-child(18)::before,
.dot:nth-child(18)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 18);
}
.dot:nth-child(19) {
  transform: rotate(calc(360deg / 36 * 19)) translateY(calc(-450px / 2));
}
.dot:nth-child(19)::before,
.dot:nth-child(19)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 19);
}
.dot:nth-child(20) {
  transform: rotate(calc(360deg / 36 * 20)) translateY(calc(-450px / 2));
}
.dot:nth-child(20)::before,
.dot:nth-child(20)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 20);
}
.dot:nth-child(21) {
  transform: rotate(calc(360deg / 36 * 21)) translateY(calc(-450px / 2));
}
.dot:nth-child(21)::before,
.dot:nth-child(21)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 21);
}
.dot:nth-child(22) {
  transform: rotate(calc(360deg / 36 * 22)) translateY(calc(-450px / 2));
}
.dot:nth-child(22)::before,
.dot:nth-child(22)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 22);
}
.dot:nth-child(23) {
  transform: rotate(calc(360deg / 36 * 23)) translateY(calc(-450px / 2));
}
.dot:nth-child(23)::before,
.dot:nth-child(23)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 23);
}
.dot:nth-child(24) {
  transform: rotate(calc(360deg / 36 * 24)) translateY(calc(-450px / 2));
}
.dot:nth-child(24)::before,
.dot:nth-child(24)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 24);
}
.dot:nth-child(25) {
  transform: rotate(calc(360deg / 36 * 25)) translateY(calc(-450px / 2));
}
.dot:nth-child(25)::before,
.dot:nth-child(25)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 25);
}
.dot:nth-child(26) {
  transform: rotate(calc(360deg / 36 * 26)) translateY(calc(-450px / 2));
}
.dot:nth-child(26)::before,
.dot:nth-child(26)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 26);
}
.dot:nth-child(27) {
  transform: rotate(calc(360deg / 36 * 27)) translateY(calc(-450px / 2));
}
.dot:nth-child(27)::before,
.dot:nth-child(27)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 27);
}
.dot:nth-child(28) {
  transform: rotate(calc(360deg / 36 * 28)) translateY(calc(-450px / 2));
}
.dot:nth-child(28)::before,
.dot:nth-child(28)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 28);
}
.dot:nth-child(29) {
  transform: rotate(calc(360deg / 36 * 29)) translateY(calc(-450px / 2));
}
.dot:nth-child(29)::before,
.dot:nth-child(29)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 29);
}
.dot:nth-child(30) {
  transform: rotate(calc(360deg / 36 * 30)) translateY(calc(-450px / 2));
}
.dot:nth-child(30)::before,
.dot:nth-child(30)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 30);
}
.dot:nth-child(31) {
  transform: rotate(calc(360deg / 36 * 31)) translateY(calc(-450px / 2));
}
.dot:nth-child(31)::before,
.dot:nth-child(31)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 31);
}
.dot:nth-child(32) {
  transform: rotate(calc(360deg / 36 * 32)) translateY(calc(-450px / 2));
}
.dot:nth-child(32)::before,
.dot:nth-child(32)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 32);
}
.dot:nth-child(33) {
  transform: rotate(calc(360deg / 36 * 33)) translateY(calc(-450px / 2));
}
.dot:nth-child(33)::before,
.dot:nth-child(33)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 33);
}
.dot:nth-child(34) {
  transform: rotate(calc(360deg / 36 * 34)) translateY(calc(-450px / 2));
}
.dot:nth-child(34)::before,
.dot:nth-child(34)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 34);
}
.dot:nth-child(35) {
  transform: rotate(calc(360deg / 36 * 35)) translateY(calc(-450px / 2));
}
.dot:nth-child(35)::before,
.dot:nth-child(35)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 35);
}
.dot:nth-child(36) {
  transform: rotate(calc(360deg / 36 * 36)) translateY(calc(-450px / 2));
}
.dot:nth-child(36)::before,
.dot:nth-child(36)::after {
  animation-delay: calc(-2000ms * 6 / 36 * 36);
}
